<template>
  <svg class="icon" :class="{[`H-buttom-${iconPosition}`]:true,[`H-buttom-loading`]:loading}">
    <!-- Uisetting -->
    <use :xlink:href='`#${icon}`'></use>
  </svg>
</template>

<script>
export default {
  name: '',
  props:{
    icon:{
      type:String,
    },
    loading:{
      type:Boolean,
      default:false
    },
    iconPosition:{
      type:String,
      default:'left',
      validator(val) {
        return val === 'left' || val === 'right'
      }
    }
  }
}
</script>

<style lang = "scss">
  .icon {
      width: 1em; height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
  }
  @keyframes loading {
    0% {transform:rotate(0deg)}
    100% {transform:rotate(360deg)}
  }
  .H-buttom-loading{
    animation: 1s loading infinite forwards normal;
  }
</style>